<template>
	<view class="">
		<view class="topbox">
			<u-navbar title="首页" title-color="#ffffff" title-size="36" :background="background" :border-bottom="false">
			</u-navbar>
			<view class="uerbox">
				<view class="leftbox">
					<image :src="obj.head_img" mode=""></image>
					<text>{{obj.name}}</text>
				</view>
				<view class="shezhi" @click="set">
					设置
				</view>
			</view>
		</view>
		<view class="heisebox">
			<view class="ye">
				余额<text>{{obj.money}}</text>
			</view>
			<view class="tx" @click="withdraw">
				立即提现
			</view>
		</view>
		<view class="gg">
			<view class="smallgg">
				<view class="top">
					{{obj.order.total_order}}
				</view>
				<view class="base">
					总结单
				</view>
			</view>
			<view class="smallgg">
				<view class="top">
					{{obj.order.tody_order}}
				</view>
				<view class="base">
					今日接单
				</view>
			</view>
			<view class="smallgg">
				<view class="top">
					{{obj.order.week_order}}
				</view>
				<view class="base">
					本周接单
				</view>
			</view>
			<view class="smallgg">
				<view class="top">
					{{obj.order.month_order}}
				</view>
				<view class="base">
					本月接单
				</view>
			</view>
			<view class="smallgg">
				<view class="top">
					{{obj.order.total_order_complete}}
				</view>
				<view class="base">
					总完成单
				</view>
			</view>
			<view class="smallgg">
				<view class="top">
					{{obj.order.tody_order_complete}}
				</view>
				<view class="base">
					今日完成单
				</view>
			</view>
			<view class="smallgg">
				<view class="top">
					{{obj.order.week_order_complete}}
				</view>
				<view class="base">
					本周完成单
				</view>
			</view>
			<view class="smallgg">
				<view class="top">
					{{obj.order.month_order_complete}}
				</view>
				<view class="base">
					本月完成单
				</view>
			</view>
		</view>

		<view class="btnbox">
			<view class="title">
				订单信息
			</view>
			<u-tabs :list="tblist" bar-width="110" font-size="26" bg-color="#F1F1F1" active-color="#ff3333"
				:is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>


		<view class="smallbox" v-for="(item,index) in list" :key="index">
			<view class="topboxs">
				<view class="leftbox">
					<image src="http://youjialibo.wm76.mtnet.ren/upload/20210915/f07ca40560116446202d142a8569dfda.png" mode="" class="touxiang"></image>
					<view class="uerbox">
						<view class="name">
							{{item.name}}<text>{{item.phone}}</text>
						</view>
						<view class="site">
							收货地址：{{item.address}}
						</view>
					</view>
				</view>
				<image src="../../static/组%203.png" mode="" class="biaozhi" v-if="current==0"></image>
			</view>
			<view class="hr"></view>
			<view class="basebox" v-for="(items,indexs) in item.commodity" :key="indexs">
				<image :src="items.img" mode=""></image>
				<view class="rightbox">
					<view class="title">
						{{items.name}}
					</view>
					<view class="cnet">
						{{items.attribute}}
					</view>
					<view class="price" v-if="items.money">
						<text>￥</text>{{items.money}}
					</view>
					<view class="price" v-if="items.integral">
						<text>￥</text>{{items.integral}}
					</view>
				</view>
			</view>
			<view class="anniu" v-if="current==0" @click="begandelivery(item)">
				开始送货
			</view>
			<view class="anniu songda" v-if="current==1" @click="truearrive(item)">
				确认送达
			</view>
			<view class="shouyi" v-if="current==2">
				收益：<text>{{item.money}}</text>
			</view>
		</view>
		<!-- </scroll-view> -->

	</view>
</template>

<script>
	import {
		getindex,
		getorderlists,
		distributionorder,
		serviceorder
	} from "../../api/api/index.js"
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'linear-gradient(0deg,  #FF7E65,#FF3333,)',
				},
				tblist: [{
					name: "待送货"
				}, {
					name: "送货中"
				}, {
					name: "已完成"
				}],
				current: 0,
				obj: {},
				flag: false,
				page: 0,
				limit: 10,
				list: []
			}
		},
		methods: {
			change(index) {
				this.current = index;
				this.page = 0
				this.flag = false
				this.list = []
				this.getList()
			},
			set() {
				this.jumpLink({
					link: "/pagesA/set/index",query:{img:this.obj.head_img}
				})
			},
			withdraw() {
				this.jumpLink({
					link: "/pagesA/withdraw/index"
				})
			},
			public() {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				getindex().then(res => {
					uni.hideLoading()
					this.obj = res.data
				})
			},
			getList(flag) {
				if (this.flag) {
					return uni.showToast({
						title: "没有更多了",
						icon: "none",
						duration: 2000,
					});
				}
				// if (flag) {
				// 	this.page = 0
				// 	this.list = []
				// 	this.flag = false
				// }
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				this.page++
				let data = {
					page: this.page,
					limit: this.limit,
					type: this.current + 1
				}
				getorderlists(data).then(res => {
					uni.hideLoading()
					if (res.data < this.limit) {
						this.flag = true
					}
					this.list = this.list.concat(res.data)
				})
			},
			// 配送
			begandelivery(v){
				let that=this
				uni.showLoading({
					title:"开始送货",
					mask:true
				})
				distributionorder({id:v.id}).then(res=>{
					uni.hideLoading()
					setTimeout(function(){
						that.page=0
						that.list=[]
						that.flag=false
						that.getList()
					},1000)
				})
			},
			truearrive(v){
				let that=this
				uni.showLoading({
					title:"开始送货",
					mask:true
				})
				serviceorder({id:v.id}).then(res=>{
					uni.hideLoading()
					setTimeout(function(){
						that.page=0
						that.list=[]
						that.flag=false
						that.getList()
					},1000)
				})
			}
		},
		onLoad() {

		},
		onShow() {
			this.public()
			this.getList()
		},
		onReachBottom() {
			this.getList()
		},
	}
</script>

<style scoped lang="scss">
	.topbox {
		width: 750rpx;
		height: 366rpx;
		background: linear-gradient(0deg, #FF7E65, #FF3333);

		.uerbox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;

			.leftbox {
				display: flex;
				align-items: center;
				margin-left: 23rpx;

				image {
					width: 129rpx;
					height: 129rpx;
					border-radius: 129rpx;
				}

				text {
					font-family: MicrosoftYaHei-Bold;
					font-size: 48rpx;
					color: #ffffff;
					font-weight: 700;
					margin-left: 34rpx;
				}
			}

			.shezhi {
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #ffffff;
				margin-right: 48rpx;
			}
		}
	}

	.heisebox {
		width: 710rpx;
		height: 141rpx;
		background-image: url("http://youjialibo.wm76.mtnet.ren/upload/20210915/d4f673a187a7c187a33ec603a5a18195.png");
		background-size: 710rpx 141rpx;
		border-radius: 6rpx;
		display: flex;
		justify-content: space-between;
		margin-top: -75rpx;
		margin-left: 20rpx;
		line-height: 141rpx;

		.ye {
			font-family: MicrosoftYaHei;
			font-size: 22rpx;
			color: #ffffff;
			margin-left: 35rpx;
			display: flex;
			align-items: center;

			text {
				font-family: PingFang-SC-Heavy;
				font-size: 48rpx;
				color: #ffd042;
				margin-left: 38rpx;
				font-weight: 700;
			}
		}

		.tx {
			width: 160rpx;
			height: 56rpx;
			background-color: #ffcc33;
			border-radius: 28rpx;
			line-height: 56rpx;
			text-align: center;
			font-family: PingFang-SC-Medium;
			font-size: 24rpx;
			color: #000000;
			margin-top: 43rpx;
			margin-right: 28rpx;
		}
	}

	.gg {
		width: 710rpx;
		height: 328rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 2rpx 15rpx 1rpx rgba(26, 0, 1, 0.1);
		border-radius: 20rpx;
		margin-top: 17rpx;
		margin-left: 17rpx;
		padding: 20rpx 0;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;

		.smallgg {
			width: 177rpx;
			text-align: center;
			height: 95rpx;
			border-right: 2rpx solid #e7e7e7;
			margin-top: 20rpx;

			.top {
				font-family: PingFang-SC-Heavy;
				font-size: 36rpx;
				color: #eb322e;
			}

			.base {
				font-family: MicrosoftYaHei;
				font-size: 22rpx;
				color: #444444;
				margin-top: 20rpx;
			}
		}

		.smallgg:nth-child(4) {
			border: none;
		}

		.smallgg:nth-child(8) {
			border: none;
		}
	}

	.btnbox {
		background-color: #F1F1F1;
		margin-top: 20rpx;
		padding-top: 57rpx;
		box-sizing: border-box;

		.title {
			font-family: MicrosoftYaHei-Bold;
			font-size: 30rpx;
			color: #000000;
			margin-left: 21rpx;
			font-weight: 700;

		}
	}

	.smallbox {
		width: 710rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;

		.topboxs {
			display: flex;
			justify-content: space-between;
			margin-left: 10rpx;

			.leftbox {
				display: flex;
				align-items: center;
				margin-left: 15rpx;
				margin-top: 10rpx;

				.touxiang {
					width: 56rpx;
					height: 56rpx;
					border-radius: 56rpx;
				}

				.uerbox {
					margin-left: 10rpx;

					.name {
						font-family: MicrosoftYaHei-Bold;
						font-size: 26rpx;
						color: #000000;
						font-weight: 700;

						text {
							margin-left: 20rpx;
						}
					}

					.site {
						font-family: MicrosoftYaHei;
						font-size: 22rpx;
						color: #000000;
						margin-top: 10rpx;
					}
				}
			}

			.biaozhi {
				width: 105rpx;
				height: 105rpx;
			}
		}

		.hr {
			width: 688rpx;
			height: 1rpx;
			background-color: #ededed;
			margin-left: 10rpx;
		}

		.basebox {
			margin-left: 10rpx;
			display: flex;
			align-items: center;

			image {
				width: 150rpx;
				height: 150rpx;
			}

			.rightbox {
				margin-left: 30rpx;

				.title {
					width: 487rpx;
					font-family: SourceHanSansCN-Normal;
					font-size: 28rpx;
					color: #000000;
				}

				.cnet {
					font-family: PingFang-SC-Medium;
					font-size: 20rpx;
					color: #838383;
					margin-top: 10rpx;
				}

				.price {
					font-family: PingFang-SC-Heavy;
					font-size: 36rpx;
					color: #e13c35;

					text {
						font-family: PingFang-SC-Heavy;
						font-size: 22rpx;
						color: #e13c35;
					}
				}
			}
		}

		.anniu {
			width: 186rpx;
			height: 58rpx;
			background-color: #ff3333;
			border-radius: 29rpx;
			line-height: 58rpx;
			text-align: center;
			font-family: MicrosoftYaHei;
			font-size: 24rpx;
			color: #ffffff;
			margin-left: 500rpx;
			margin-top: 30rpx;
			margin-bottom: 10rpx;
		}

		.songda {
			background-color: #ff9833;
		}

		.shouyi {
			margin-left: 500rpx;
			margin-top: 30rpx;
			margin-bottom: 10rpx;
			font-family: MicrosoftYaHei;
			font-size: 24rpx;
			color: #626262;

			text {
				font-size: 36rpx;
				font-weight: normal;
				color: #ff1e1e;
			}
		}
	}

	.scrollContent {
		height: calc(100vh - 280rpx - 140rpx - 78rpx);
	}
</style>
